<template>
  <div
    class="sidebar-container"
    :class="{ collapsed: isCollapse }"
  >
    <!-- 标题区域 -->
    <div
      class="title-container"
      v-show="!isCollapse"
    >
      <h1 class="system-title">CC-VIDEO 后台管理系统</h1>
    </div>

    <!-- 菜单区域 -->
    <el-menu
      :default-active="route.path.replace('/', '')"
      class="sidebar-menu"
      :collapse="isCollapse"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      :router="true"
    >
      <!-- 数据统计 -->
      <el-menu-item index="dashboard">
        <el-icon><TrendCharts /></el-icon>
        <span>数据统计</span>
      </el-menu-item>

      <!-- 平台管理 -->
      <el-sub-menu>
        <template #title>
          <el-icon><Monitor /></el-icon>
          <span>平台管理</span>
        </template>

        <el-menu-item index="carousel">
          <el-icon><Picture /></el-icon>
          <span>轮播图管理</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 系统配置 -->
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统配置</span>
        </template>

        <el-menu-item index="server">
          <el-icon><Setting /></el-icon>
          <span>系统信息</span>
        </el-menu-item>

        <el-menu-item index="redis">
          <el-icon><Coin /></el-icon>
          <span>Redis 缓存</span>
        </el-menu-item>

        <el-menu-item index="dynamicThreadPool">
          <el-icon><Connection /></el-icon>
          <span>线程池管理</span>
        </el-menu-item>

        <el-menu-item index="dbDoc">
          <el-icon><Collection /></el-icon>
          <span>数据库文档</span>
        </el-menu-item>

        <el-menu-item @click="openSwagger">
          <el-icon><Document /></el-icon>
          <span>Swagger文档</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 后台管理 -->
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Tools /></el-icon>
          <span>后台管理</span>
        </template>

        <el-menu-item index="user">
          <el-icon><User /></el-icon>
          <span>账号管理</span>
        </el-menu-item>

        <el-menu-item index="role">
          <el-icon><UserFilled /></el-icon>
          <span>角色列表</span>
        </el-menu-item>

        <el-menu-item index="dict">
          <el-icon><List /></el-icon>
          <span>字典管理</span>
        </el-menu-item>

        <el-menu-item index="area">
          <el-icon><List /></el-icon>
          <span>地区列表</span>
        </el-menu-item>

        <el-menu-item index="operateLog">
          <el-icon><List /></el-icon>
          <span>操作日志</span>
        </el-menu-item>

        <el-menu-item index="loginLog">
          <el-icon><Clock /></el-icon>
          <span>登录日志</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import {
  TrendCharts,
  Monitor,
  Setting,
  Collection,
  Picture,
  Connection,
  Coin,
  Document,
  Tools,
  User,
  UserFilled,
  List,
  Clock
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const route = useRoute()

defineProps<{
  isCollapse: boolean
}>()

const swaggerSrc = import.meta.env.VITE_DOC_URL

const openSwagger = () => {
  window.open(swaggerSrc, '_blank')
}
</script>

<style lang="scss" scoped>
.sidebar-container {
  height: 100vh; // 改为100vh确保占满整个视口高度
  background-color: #304156;
  position: relative;
  width: 210px;
  transition: width 0.3s;
  display: flex;
  flex-direction: column; // 使用flex布局

  &.collapsed {
    width: 64px;
  }

  .title-container {
    height: 60px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #304156;
    cursor: default;
    flex-shrink: 0; // 防止标题被压缩

    .system-title {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      white-space: nowrap;
      text-align: center;
    }
  }

  .sidebar-menu {
    border-right: none;
    flex: 1; // 占据剩余空间
    overflow-y: auto; // 添加垂直滚动
    overflow-x: hidden; // 隐藏水平滚动条

    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #41546d;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background-color: #304156;
    }
  }
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu--collapse) {
  width: 64px;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;

  &:hover {
    background-color: #263445 !important;
  }

  .el-icon {
    font-size: 18px;
    margin-right: 12px;
    vertical-align: middle;
  }

  span {
    font-size: 14px;
  }
}

:deep(.el-menu-item.is-active) {
  background-color: #263445 !important;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #409eff;
  }
}

:deep(.el-sub-menu.is-active) {
  .el-sub-menu__title {
    color: #409eff !important;
  }
}

// 折叠时隐藏滚动条
:deep(.el-menu--collapse) {
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
